<template>
	<el-dialog width="500px" :title="dialogTitle" :visible.sync="dialogVisible" :close-on-click-modal="false">
		<el-form ref="ruleForm" :model="form" :rules="rules" label-width="100px">
			<el-form-item label="订单编号">
				<el-input v-model="form.clue_id" disabled />
			</el-form-item>
			<el-form-item label="处理状态">
				<el-radio-group v-model="form.remark_status" v-for="item in typeList" >
					<el-radio-button :label="item.id" :value="item.id">{{ item.name }}</el-radio-button>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input v-model="form.remark" type="textarea" :rows="4" placeholder="备注" />
			</el-form-item>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button size="small" @click="dialogVisible = false">取 消</el-button>
			<el-button size="small" type="primary" @click="submit">确 定</el-button>
		</div>
	</el-dialog>
</template>
  
<script>
import { setDouyinClueRemark } from '@/api/data'
export default {
	// props: ['orderId'],
	props: {
		orderId: {
			type: String,
			default: ''
		},
		dialogTitle: {
			type: String,
			default: ''
		},
		typeList:{
			type:Array,
			default:[]
		}
	},
	data() {
		return {
			form: {
				clue_id: '',
				remark: '',
				remark_status: '',
			},
			rules: {
				remark: [
					{ required: true, message: '备注不能为空', trigger: 'blur' }
				]
			},
			dialogVisible: false
		}
	},
	watch: {
		dialogVisible(val) {
			if (val) {
				this.form.clue_id = this.orderId
				this.form.remark = ''
			} else {
				this.$refs['ruleForm'].resetFields()
			}
		}
	},
	methods: {
		submit() {
			this.$refs['ruleForm'].validate((valid) => {
				if (valid) {
					console.log(this.form);
					if(this.form.remark_status==''){
						this.$message({
						message: '请选择备注类型',
						type: 'error'
					})
					return
					}else{
						setDouyinClueRemark({ ...this.form }).then(res => {
						this.dialogVisible = false
						this.$emit('getList', true)
					})
					}
				} else {
					this.$message({
						message: '请检查表单错误',
						type: 'error'
					})
					return false
				}
			})
		}
	}
}
</script>
  
<style lang="scss" scoped></style>
  